@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.waiter{
    display: block;
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index: 99999;
    
    display: none;
}
.waiter.waiter_show{
    display: block;
}

.waiter__underlayer{
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: #d0d0d0;
    opacity: 0;
    transition: opacity 0.2s;
}
.waiter.waiter_show .waiter__underlayer{
    opacity: .6;
    transition: opacity 0.2s;
}

.waiter__holder{
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.waiter.waiter_show .waiter__holder{
    opacity: 1;
    transition: opacity 0.2s;
}

.waiter__circle{
    width: 50px;
    height: 50px;
    border: #656C6F 5px solid;
    border-top-color: #e20932;
    border-radius: 50%;
    position: relative;
    
    animation-name: rotating;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
.waiter__circle:after{
    content: '';
    display: block;
    position: absolute;
    left:1px;
    top:1px;
    right:1px;
    bottom:1px;
    border: #656C6F 5px solid;
    border-top-color: #e20932;
    border-radius: 50%;
    
    animation-name: rotating;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
}